class Loading extends HTMLElement {
    static get observedAttributes() { return ['exhibit']; }
  
    constructor() {
      super();
      this._exhibit= false;
      this.attachShadow({ mode: 'open' }); // 提前创建 Shadow Root
      this._render(); // 立即渲染
    }
  
    async _render() {
      const template = await this._getTemplate();
      this.shadowRoot.innerHTML = ''; // 清空现有内容
      this.shadowRoot.appendChild(template.content.cloneNode(true));
      this._updateDisexhibit(); // 初始化显示状态
    }
  
    async _getTemplate() {
      const response = await fetch('/components/loading/bounce/index.html');
      const html = await response.text();
      const doc = new DOMParser().parseFromString(html, 'text/html');
      return doc.getElementById('wcs-loading-bounce');
    }
  
    attributeChangedCallback(name, oldVal, newVal) {
      if (oldVal === newVal) return;
      this._exhibit= (newVal === 'true');
      this._updateDisexhibit();
    }
  
    _updateDisexhibit() {
      if (!this.shadowRoot) return;
      const loading = this.shadowRoot.getElementById('loading');
      if (loading) {
        loading.style.display = this._exhibit? 'block' : 'none';
      }
    }
  
    get exhibit() { return this._exhibit; }
    set exhibit(value) {
      const boolValue = Boolean(value);
      if (this._exhibit!== boolValue) {
        this._exhibit= boolValue;
        this.setAttribute('exhibit', boolValue.toString());
        this.shadowRoot.getElementById("loading").setAttribute('exhibit', boolValue.toString());
      }
    }
  }
  
  customElements.define('wcs-loading-bounce', Loading);